<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            relative 相对元素 元素会保留本来文档流的位置

            (感觉老师讲的有问题)
            相对定位是元素移动以后的位置相对元素原来的位置
            top 正值向下移动 负值向上移动
            bottom 正值向上移动 负值向下移动
            left  正值向右移动 负值向左移动
            right 正值向左移动 负值向右移动 
            
            （个人理解）
            相对定位 元素移动以后的位置 “回到” 元素原来的位置
            top 正值向上移动 负值向下移动
            bottom 正值向下移动 负值向上移动
            left 正值向左移动 负值向右移动 
            right  正值向右移动 负值向左移动
        */
        */
        *{
            margin: 0;
            padding: 0;
        }
        .d1 {
            height: 100px;
            width: 100px;
            border: solid;
            position: relative;
            /* top: 100px;
            left: 100px; */
            right: -100px;
            bottom: -100px;
        }
        .box {
            width: 400px;
            height: 400px;
            border: solid;
            margin: 40px auto;
        }
        .son {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: relative;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <span>hello</span>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>